/**
 * Created by lenovo on 2017/1/13.
 */

import React from "react"

class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: 'jiony',
            email:'jiony@126.com',
            subject:'Job Inquiry',
            message:"this is message",

        }
    }

    handleClick(event) {
        var that = this;
        this.setState({
            name: document.getElementById("name").value,
            email: document.getElementById("email").value,
            message: document.getElementById("message").value
        });
       
        return true
    }

    handleChange(event) {
        this.setState({subject: event.target.value});
    }
    componentWillMount(event) {
        console.log('WillMount')
    }
    componentDidMount(event) {
        console.log('DidMount');

    }

    componentDidUpdate(props,states) {
        console.log(props);
        console.log(states);
    }

    render() {
        return (
        <form id="smart-green " name="smart-green " className="smart-green ">
        <h1>React-Form-Demo
			<span>Please fill all the texts in the fields.</span>
		</h1>
        <label>
			<span>Your Name :</span>
			<input id="name" type="text" name="name" placeholder="Your Full Name" />
		</label>
		<label>
			<span>Your Email :</span>
			<input id="email" type="email" name="email" placeholder="Valid Email Address" />
		</label>
		<label>
			<span>Subject :</span>
			<select name="selection" onChange={this.handleChange.bind(this)}>
			<option value="Job Inquiry">Job Inquiry</option>
			<option value="General Question">General Question</option>
			</select>
		</label>
		<label>
			<span>Message :</span>
			<textarea size="20" id="message" name="message" placeholder="Your Message to Us"></textarea>
		</label>

		<label>
			<span>提交信息为：</span>
		</label>
		<br/>
		<br/>
		<label className="result">
			{this.state.name}:{this.state.email}:{this.state.subject}:{this.state.message}
		</label>
		<br/>
		<br/>
		<br/>
		<label>
			<span>&nbsp;</span>
			<input onClick={this.handleClick.bind(this)} type="button" className="button" value="Send" />
		</label>

		</form>
      );
    }
}

export default Main

